<template>
  <div>
    <a-row>
      <a-col :span="17">
        <a-input v-model="curValue" @input="onInput" :style="{ width: '100%' }"></a-input>
        <!-- <a-select  v-model="value" :style="{width:'100%'}" placeholder="请选择" :disabled="disabled" @select="onSelect" @search="handleSearch" :open="false">
          <a-icon slot="suffixIcon" type="" />
          <a-select-option v-for="item in dataSource" :key="item.Id" :value="item.Id">{{ item.Name }}</a-select-option>
        </a-select> -->
      </a-col>
      <a-col :span="2">
        <a-button type="primary" :disabled="disabled" @click="handleOpenChoose">
          <a-icon type="search" />
        </a-button>
      </a-col>
    </a-row>
    <CompanyChoose ref="customerChoose" @onChoose="handleChoose"></CompanyChoose>
  </div>
</template>
<script>
import CompanyChoose from './CompanyChoose'

export default {
  props: {
    unitGroupId: { type: String, default: '', required: false },
    // eslint-disable-next-line vue/require-default-prop
    value: { type: String, default: '', required: false },
    disabled: { type: Boolean, required: false }
  },
  components: {
    CompanyChoose
  },
  data () {
    return {
      curValue: '',
      keyword: '',
      timeout: null,
      dataSource: []
      // eslint-disable-next-line vue/no-dupe-keys
      // UnitGroupId: '',
      // disabled: false
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value, value2) {
        this.curValue = value
      }
    }
    // value(value,value2) {
    //   console.log(value,value2,'1111111111')
    //   this.curValue = value
    //   if (this.curValue !== '' && this.curValue !== undefined && this.curValue !== null) {
    //     this.reload('')
    //   }
    // }
  },
  mounted () {
    if (this.curValue !== '' && this.curValue !== undefined && this.curValue !== null) {
      this.reload('')
    }
    /**
     * 重复声明且没有指向导致报错
     * this.UnitGroupId = UnitGroupId
     */
    // eslint-disable-next-line no-undef
    // eslint-disable-next-line no-undef
    // this.TypeName = TypeName
  },
  methods: {
    reload (q) {
      this.keyword = q
      clearTimeout(this.timeout)
      // this.timeout = setTimeout(() => {
      //   this.$http.post('/Base/Base_UnitItems/GetDataList', { Id: this.curValue, Keyword: q, Take: 10 }).then(resJson => {
      //     if (resJson.Success && q == this.keyword) {
      //       this.dataSource = resJson.Data
      //     }
      //   })
      // }, 500)
    },
    onSelect (value, option) {
      console.log(option)
      this.$emit('input', value)
      var rowQuery = this.dataSource.filter((val, index, arr) => {
        return val.Id == value
      })
      if (rowQuery.length > 0) {
        this.$emit('select', rowQuery[0])
      }
    },
    onInput (e) {
      this.$emit('input', this.curValue)
      // console.log(this.value,this.curValue,e)
    },
    handleSearch (value) {
      this.reload(value)
    },
    handleOpenChoose () {
      console.log(1232321)
      console.log(this.UnitGroupId)
      this.$refs.customerChoose.openChoose(this.UnitGroupId)
    },
    handleChoose (selectedRows, record) {
      this.dataSource = [...selectedRows]
      var row = selectedRows[0]
      this.curValue = row.Taxproductname
      console.log(record)
      this.$emit('select', row, record)
    }
  }
}
</script>
